<template>
  <div>
    <!-- <dv-border-box-4 :reverse="true"> -->
    <div class="update-demo">
      <div style="width:100%;align:center">
        <dv-decoration-11 style="width:200px;height:60px;font-size:23px; margin-left: 730px;" align='center'>今日数据
        </dv-decoration-11>
        <dv-decoration-5 style="width:100%;height:40px;" align='center' :dur="10" />
      </div>

      <div id="container" style="width:100%"></div>

      <!-- <dv-capsule-chart :config="config3" style="width:300px;height:200px" /> -->

      <el-row id="a">
        <el-col :span='12'>
          <dv-decoration-8 style="width:300px;height:50px;" />
        </el-col>
        <el-col :span='12'>
          <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
        </el-col>
      </el-row>
    </div>
    <!-- </dv-border-box-4> -->
  </div>
</template>

<script>

import Charts from '@jiaminghi/charts'
export default {

  name: 'UpdateDemo',
  data () {
    return {
      config: {
        value: 66,
        lineDash: [10, 2]
      },
      option: {
        legend: {
          data: [{
            name: '收费系统',
            color: '#00baff'
          },
          {
            name: '监控系统',
            color: '#ff5ca9'
          },
          {
            name: '通信系统',
            color: '#3de7c9'
          },
          {
            name: '供配电系统',
            color: '#f5d94e'
          }
          ],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: [
            '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
          ],
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 8
        },
        series: [{
          name: '收费系统',
          data: [
            2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
          ],
          type: 'bar',
          barStyle: {
            fill: 'rgba(0, 186, 255, 0.4)'
          }
        },
        {
          name: '监控系统',
          data: [
            2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
          ],
          type: 'line',
          lineStyle: {
            stroke: '#ff5ca9'
          },
          linePoint: {
            radius: 4,
            style: {
              fill: '#ff5ca9',
              stroke: 'transparent'
            }
          }
        },
        {
          name: '通信系统',
          data: [
            1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3
          ],
          type: 'line',
          smooth: true,
          lineArea: {
            show: true,
            gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
          },
          lineStyle: {
            lineDash: [5, 5]
          },
          linePoint: {
            radius: 4,
            style: {
              fill: '#00db95'
            }
          }
        },
        {
          data: [
            0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2
          ],
          type: 'line',
          name: '供配电系统',
          lineArea: {
            show: true,
            gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
          },
          lineStyle: {
            stroke: '#f5d94e'
          },
          linePoint: {
            radius: 4,
            style: {
              fill: '#f5d94e',
              stroke: 'transparent'
            }
          }
        }
        ],
      },
      config2: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
        img: [
          '/img/conicalColumnChart/1st.png',
          '/img/conicalColumnChart/2st.png',
          '/img/conicalColumnChart/3st.png',
          '/img/conicalColumnChart/4st.png',
          '/img/conicalColumnChart/5st.png',
          '/img/conicalColumnChart/6st.png',
          '/img/conicalColumnChart/7st.png'
        ]
      },
      config3: {
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          }
        ]
      }
    }
  },
  mounted () {
    this.charet();
  },
  methods: {
    // 更新数据的示例方法
    updateHandler () {
      const { config } = this

      /**
       * 只是这样做是无效
       * config指向的内存地址没有发生变化
       * 组件无法侦知数据变化
       */
      this.config.value = 90
      this.config.lineDash = [10, 4]

      /**
       * 使用ES6拓展运算符生成新的props对象
       * 组件侦知数据变化 自动刷新状态
       */
      this.config = { ...this.config }
    },
    charet () {
      const container = document.getElementById('container')
      const myChart = new Charts(container)
      myChart.setOption(this.option)
    },
  }
}
</script>

<style>
body,
html {
  margin: 0 auto;
  padding: 0;
  height: 100%;
  width: 100%;
}
#container {
  width: 500px;
  height: 500px;
  background: white;
}
#a {
  margin-left: 300px;
  margin-top: 200px;
}
</style>
